<template>
	<div style="margin-left: 5px;">
     <div>

		   <div  style="padding-right:5px">
			 <h3 style="display:inline-block">{{Data.CodeNum}}.</h3>   <span v-html="Data.Title" style="display:inline-block"></span>	
				<el-button   @click="divvisibility()" type="text"  style="float:right">{{see}}</el-button>
            </div>
		<div>
            
				<div class="option-area" style="margin: 5px;" v-show="visible">

					 <div class="optionLayout" v-if="Data.OrderValue==1" >
						 
						<div id='input-area'  v-for="opt in Data.Options" :key="opt.itemId" >
							<table >
								<tr style="float:left">
									<td>
											<el-radio :label="opt.itemId" v-model="Data.SelValue" @click="cid=opt.itemId">{{opt.itemName}}</el-radio>
									</td>

									<td>
										<div v-if="opt.canFillBlank">
											<el-input v-if="Data.DataTypes!=1" size="mini" v-model="opt.blankText"  style="width:100px" />
											<el-input-number size="mini"  v-if="Data.DataTypes==1" v-model="opt.blankText"></el-input-number>
										</div>
									</td>
									<td>
										<el-alert v-if="opt.memo!=''"  v-bind:title="opt.memo" type="info" :closable="false"></el-alert>
									</td>
								</tr>
							</table>
						
					
						
						</div>
						
                      
					</div>

					 <div v-if="Data.OrderValue==0">
					
				   <el-row align="middle" :gutter="20"   v-for="opt in Data.Options">
					   
					<div id='input-area' style="margin: 1px; width:100%;margin-left:5px" >

						<table>
							<tr style="float:left">
								<div >
								<td >
									  <div align="center">
											<tr>
												<el-radio :label="opt.itemId" v-model="Data.SelValue"  >{{opt.itemName}}</el-radio>	
											</tr>
											<tr>
												<img   v-show="opt.ImageUrl!=' '" :src="opt.ImageUrl"/>
											</tr>
										</div>
								</td>
                </div>
								<td>
									<div v-if="opt.canFillBlank">
										<el-input v-if="Data.DataTypes!=1" size="mini" v-model="opt.blankText"  style="width:100px" />
										<el-input-number size="mini"  v-if="Data.DataTypes==1" v-model="opt.blankText"></el-input-number>
									</div>
								</td>
								<td>
									 <el-alert v-if="opt.memo!=''"  v-bind:title="opt.memo" type="info" :closable="false"></el-alert>
								</td>
							</tr>
						</table>
					
					</div>
					
				
				   </el-row>

				    </div>
				</div>
			</div>
			
	</div>
    <div id='editor' v-if='canEdit==true' style="margin: 5px;">
		<el-card class="box-card" style="margin-top:20px" >
  		  <EditorComponent v-model="Data.Title"   />
			<div class="radius" style="border-radius:2px; height:50px">
				  <table class='setting-table ' style="width:100%;float:left" >
									<tr>
										<td>
											<el-checkbox  v-model="Data.MustAnswer"  >必答题</el-checkbox>
										</td>

										<td>
											<el-checkbox  v-model="Data.TitleBlank"  >标题可以填空</el-checkbox>
										</td>
                                        <td>
                                            <BatchAddComponent v-model="msg" @getitem="itemNameArry" :itemnamearry="itemname"></BatchAddComponent>
										    <button @click="getanswer">answer</button>
										</td>
										<td>
											  <DataTypeSelector  @EvGetDataType="SetDataType" />
										</td>

										 <td >    
											   <OrderByComponent v-model="Data.OrderValue"  />
										</td>
									</tr>
				  </table>
			
							
			</div>
     
	 <el-table :fit="true" :data="Data.Options" style="width: 100%">
      <el-table-column  label="选项文字" >
		   <template slot-scope="scope">
			   <div id='title-row' >
				   <el-input size="small" style='display: inline-block;'  v-model="scope.row.itemName" placeholder="请输入内容"></el-input>
			   </div>
			</template>
	  </el-table-column>

		<el-table-column  label="操作"  >
				  <template slot-scope="scope">
						<div style='display: inline-block;margin-top: 5px;'>
							<el-button type="warning" @click="remove(scope.row.itemId)" size="mini" style='display: inline-block;' icon="el-icon-minus" circle></el-button>
							<el-button type="danger"  @click="insert(scope.row.itemId)" size="mini" style='display: inline-block;'  icon="el-icon-plus" circle></el-button>
							<el-button  size="mini" style='display: inline-block;' @click='moveUp(scope.row.itemId)' icon="el-icon-top" circle></el-button>
							<el-button  size="mini" style='display: inline-block;' @click='moveDown(scope.row.itemId)' icon="el-icon-bottom" circle></el-button>
						</div>
				 </template>
		</el-table-column>

    <el-table-column label="图片">
        <template slot-scope="scope">
           <ImageBase64Componet @HasGotImage="savepicture" @clearpicture="clearpicture(scope.row.itemId)" :param="scope.row.itemId" > </ImageBase64Componet>
				</template>
    </el-table-column>

	    <el-table-column  label="说明"  >
			  <template slot-scope="scope">
			 <el-input v-model="scope.row.memo" size="small" placeholder="请输入内容"></el-input>
			 </template>
	    </el-table-column>

		 <el-table-column  label="允许填空">
			 <template slot-scope="scope">
				 <el-checkbox  v-model="scope.row.canFillBlank" ></el-checkbox>
			 </template>
	    </el-table-column>

		 <el-table-column prop="defaultSel" label="默认" >
			    <template slot-scope="scope">
					 <el-checkbox  v-model="scope.row.defaultSel" ></el-checkbox>
				 </template>
		</el-table-column> 

		 <el-table-column v-if="Data.DataType==1" prop="defaultSel" label="最小值" >
			    <template slot-scope="scope">
					 <div>
                    <el-input-number size="mini"  v-model="scope.row.MinValue"></el-input-number>
					 </div>
				 </template>
		</el-table-column> 

        <el-table-column v-if="Data.DataType==1" prop="defaultSel" label="最大值" >
			    <template slot-scope="scope">
					 <div>
                    <el-input-number size="mini"  v-model="scope.row.MaxValue"></el-input-number>
					 </div>
				 </template>
		</el-table-column> 
			 

	
    </el-table>
	     <el-button type="warning " style='margin-top:5px;width:100%' @click="canEdit=false">完成编辑</el-button>
		 
		 </el-card>
	     </div>
	</div>
</template>

<script lang='ts'>
  
  import {Component, Vue, Watch, Prop } from 'vue-property-decorator'
  import RadioSelOption from './ts/RadioSelOption';
  import TBaseQuestion from './ts/TBaseQuestion'
	import RadioSelSubject from './ts/RadioSelSubject'
	import { QuestionDataTypes,QuestionTypes } from './ts/QuestionDataTypes';
	import DataTypeSelector from './DataTypeSelector.vue'

	import EditorComponent from './EditorComponent.vue'
	import OrderBy,{OrderByTypes} from './ts/OrderByTypes'
	import OrderByComponent from './OderByComponent.vue'
	import BatchAddComponent from './BatchAddComponent.vue';
	import ImageBase64Componet from './ImageBase64Componet.vue';
	import QuestionSubject from'./ts/QuestionSubject';
 @Component(
     {
         components:{EditorComponent,DataTypeSelector,OrderByComponent,BatchAddComponent,ImageBase64Componet}
     }
 )
	export  default class radioSelComponent  extends TBaseQuestion<RadioSelOption,RadioSelSubject> {
	  
	  
     
      $name:string= 'radioSelComponent'
			canEdit=true;
      //选中itemid
			cid!:string;

      itemname="";
      options:RadioSelOption[]=[];
	    msg:string ="";
	    gotMsg:string[]=[];
			visible=false;
			see="显示";
			//获取初始item
			itemNameArry(){
  			this.itemname=this.getOptionText();
			}
			//接收图片地址
			savepicture(id:string,url:string){
				console.log(id);
				let opt=this.Data.Options;
				let option=opt[opt.findIndex(item=>item.itemId===id)];
				option.ImageUrl=url;
			}

	   @Watch('msg')
	    getstr(){
			this.gotMsg=this.msg.split('\n')
			this.gotMsg.forEach(element => {
			  if(element!=" "){
			    var opt =new RadioSelOption();
			    opt.itemName=element;
			    this.options.push(opt);
			  }
		    });
		    this.Data.Options=this.options;
			this.options=[];
			
		 }
		 //清除图片
		 clearpicture(id:string){
         let opt=this.Data.Options;
				 let option=opt[opt.findIndex(item=>item.itemId===id)];
				 option.ImageUrl=" ";
		 }
	   
	   //获取options中每一项的name
	    getOptionText():string{
			let options="";
			let n=this.Data.Options.length;
			for(let i=0;i<n;i++){
				if(i<(n-1)){
					options+=this.Data.Options[i].itemName+"\n";
				}else{
                    options+=this.Data.Options[i].itemName;
				}
			}
			return options;
			
		}
      constructor ()
      {
			super(RadioSelOption,RadioSelSubject);
			
			this.Data.QuestionType=QuestionTypes.qtRadio;
		  
			//this.Data.DataType= QuestionDataTypes.dtText;
			//this.Data.Title="设置标题";
			
        for(var i:number=0;i<5;++i)
          {
              var opt = new RadioSelOption();
              opt.itemName='选项'+i;
              this.Data.Options.push(opt);
          }
	  }
	  
	mounted()
    {
		super.mounted();
        this.initProps();
         console.info("radioSelComponent mounted!");
    }
    //根据输入值选中相关的选项
	checkItem():void
	{
		this.Data.Options.forEach(opt => {
			if((opt.MinValue<=this.Data.BlankValue)&&(this.Data.BlankValue<=opt.MaxValue))
			{
				this.Data.SelValue=opt.itemId;
				console.info("checked value:"+this.Data.SelValue);
			
			}
		});
	}
	 //输入框内容改变
	   inputchange(){
		   this.msg=this.getOptionText();
	   }
	//删除选项
	remove(str:string):void{
		super.remove(str);
		this.msg=this.getOptionText();
	}
	     //插入选项
    insert(id:string):void
    {  
		let options= this.Data.Options;
		options.splice(options.findIndex(item=>item.itemId===id)+1,0,this.createNewOption(RadioSelOption));
		this.msg=this.getOptionText();
	};
	//向上移动选项
	moveUp(id:string):void{
		super.moveUp(id);
		this.msg=this.getOptionText();
	}
	moveDown(id:string){
		super.moveDown(id);
		this.msg=this.getOptionText();
	}

     getQuestionData():any
     {
         return this.Data;
     }

     setQuestionData(data:string)
     {

     };

     getTitle():void
     {
        // console.info(Data.Title);
         // this.Data.Title;
	 }
	 
	 setTitle(txt:string):void
	 {
		 console.info(txt);
	 }


	SetDataType(dType:QuestionDataTypes)
     {
         this.Data.DataType=dType;
         
	 }
	 
	 SetOrderByX(order:OrderByTypes)
	 {
		 this.Data.OrderValue=order;
	 }
	 // 选中的值和填空的值
	  getanswer():object[]{
			
		 return this.Data.answer;
	 }

	 

	}
	
</script>
 
<style>
.optionLayout{
                display: flex;
                display: -webkit-flex;
                border: 1px solid gainsboro;
                flex-flow: row wrap;
                width: 100%;
                align-items:center;
                justify-content:left;
								
            }
.setting-table td{  text-align: center;vertical-align:middle;} table{ width: 100%;font-size: 14px;margin-top: 5px}

.divstyle{border:1px solid #C0C0C0}

.el-card__header {
	padding-top: 5px;
	
	

}
</style>
